<template>
  <div class="product-list">
    <!-- 头部搜索 -->
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardHeader> </CardHeader>
      </div>
      <cardinput-vue :text="'请输入角色名称/描述'"></cardinput-vue>

    </el-card>
    <!-- 数据 -->
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardDate></CardDate>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="role_id" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="role_name" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="role_describe" label="描述" align="center">
        </el-table-column>
        <el-table-column label="是否启动" align="center">
          <template>
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getRoleList } from '@/api';
import CardDate from '@/components/commodity/CardDate.vue';
import CardHeader from '@/components/commodity/CardHeader.vue';
import CardinputVue from '@/components/commodity/Cardinput.vue';
export default {
  name: 'KodaiOrderList',

  data() {
    return {
      tableData: [],
      value: true
    };
  },

  mounted() {
    getRoleList().then(res => {
      // console.log(res);
      this.tableData = res.data.data
      console.log(this.tableData);
    })
  },

  methods: {
    handleEdit(index, row) {
      // console.log(index, row);
      this.showMessage.call(this, 'warning', '对不起，您的权限不够' + res.data.msg);

    },
    handleDelete(index, row) {
      this.showMessage.call(this, 'error', '对不起，不能进行删除' + res.data.msg);
    }
  },
  components: {
    CardDate, CardHeader, CardinputVue
  }
};
</script>

<style lang="scss" scoped>
.el-card ::v-deep .el-card__header {
  padding: 2px 10px;
}
</style>